Students will format web pages using CSS formatting:
Objectives:
0301 CSS inline styles – Use basic CSS method of formatting a single element using inline styles. <tag style=property: value> 0302 CSS formatting -- Define and apply essential aspects of the CSS structure. 0303* CSS sheets -- Create and use internal, embedded, and external style sheets. Example: <style type=”text/css”> selector {property: value} p {color: blue} </style> 0304* Contextual selectors – Use contextual selector to specify formatting for an element, but only when it is contained in another element. 0305* Class & id selectors – Create and use class and id selectors to add a variety of styles to different elements. . 0306* Elements: div & span --Use div and span elements formatting with CSS as the layout of a web page. 0307* CSS hierarchy -- Understand the cascading order of CSS. 0308* CSS attributes – Use CSS to set properties for color, size, font, images, spacing, line height, indenting, alignment, style, placement, etc. 19 0309* CSS navigation -- Use CSS to form professional looking navigation. 0310 Terminology – Review and understand the pertinent CSS terminology.
Table of Contents
Web Development
Web Development 03 – Cascading Style Sheets (CSS)
Students will format web pages using CSS formatting:Objectives:
0301 CSS inline styles – Use basic CSS method of formatting a single element using inline styles. <tag style=property: value>0302 CSS formatting -- Define and apply essential aspects of the CSS structure.
0303* CSS sheets -- Create and use internal, embedded, and external style sheets. Example: <style type=”text/css”> selector {property: value} p {color: blue} </style>
0304* Contextual selectors – Use contextual selector to specify formatting for an element, but only when it is contained in another element.
0305* Class & id selectors – Create and use class and id selectors to add a variety of styles to different elements. .
0306* Elements: div & span --Use div and span elements formatting with CSS as the layout of a web page.
0307* CSS hierarchy -- Understand the cascading order of CSS.
0308* CSS attributes – Use CSS to set properties for color, size, font, images, spacing, line height, indenting, alignment, style, placement, etc. 19
0309* CSS navigation -- Use CSS to form professional looking navigation.
0310 Terminology – Review and understand the pertinent CSS terminology.
Lessons:
Opera WSC #4 -- The Web standards model—HTML, CSS and JavaScript, by Jonathan Lane.Opera WSC #13 -- The HTML <head> element, by Christian Heilmann.
Opera WSC #16 -- CSS basics, by Christian Heilmann.
Opera WSC #22 -- Generic containers—the div and span elements, by Mark Norman Francis.
Opera WSC #27 -- CSS basics, by Christian Heilmann.
Opera WSC #28 -- Inheritance and Cascade, by Tommy Olsson.
Opera WSC #29 -- The CSS layout model - boxes, borders, margins, padding, by Ben Henick.
Opera WSC #30 -- CSS background images, by Nicole Sullivan.
Opera WSC #32 -- Styling lists and links, by Ben Buchanan.
Opera WSC #33 -- Styling tables, by Ben Buchanan.
Opera WSC #34 -- Styling forms, by Ben Henick.
Opera WSC #35 -- Floats and clearing, by Tommy Olsson.
Opera WSC #36 -- CSS static and relative positioning, by Tommy Olsson.
Opera WSC #37 -- CSS absolute and fixed positioning, by Tommy Olsson.
Activities:
03 Terminology Worksheet --WD03_Cascading_Style_Sheets_Voc.doc
WD03_Cascading_Style_Sheets_Voc.pdf
Projects: